import '../css/paramTableCard.less'
import {CCard} from '@/components/card'
import {IconImg} from '@/components/image'
import {ParamTable} from '@/components/table/paramTable'
import {CnBoldSpan, CnNormalSpan} from '@/components/text'
import {PropType} from 'vue'
import dayjs, {Dayjs} from 'dayjs'
// import {exportCheckData} from '@/api/singleParam'
import useGlobalAPI from '@/hooks/useGlobalAPI'
import useModal from '@/hooks/modalHook'
import {baseUrl} from '@/libs/baseUrl'
import qs from 'qs'
import {selectParamTypeApi} from '@/api/singleParam'

export const ParamTableCard = defineComponent({
  props: {
    waterOverview: {
      type: Object as PropType<SingleParam.WaterOverview>,
      required: true
    }
  },
  emits: {
    dateRangeChange: (data: [Dayjs, Dayjs]): boolean => true
  },
  setup(props, ctx) {
    const {route} = useGlobalAPI()
    const {visible, openModal, closeModal} = useModal()

    const state = reactive<{
      dateRange: [Dayjs, Dayjs]
      getTableDataSwitch: boolean
    }>({
      dateRange: [dayjs().subtract(1, 'week'), dayjs()],
      getTableDataSwitch: false
    })

    const exportParam = reactive<{
      startTime: Dayjs
      endTime: Dayjs
    }>({
      startTime: dayjs(),
      endTime: dayjs()
    })

    function handleExport() {
      let devId = Number(route.query.devId as string | undefined)
      if (!isNaN(devId)) {
        let startTime = exportParam.startTime.format('YYYY-MM-DD 00:00:00')
        let endTime = exportParam.endTime.format('YYYY-MM-DD 23:59:59')
        let params = qs.stringify({
          devId,
          startTime,
          endTime
        })
        console.log(params)

        window.open(baseUrl + '/exc/exportCheckData?' + params, '_blank')
        closeModal()
      }
    }

    // 参数类型接口
    interface paramTypeInterface {
      id: number
      sort: number
      status: string
      createTime: string
      dictName: string
      dictDesc: string
      dictCode: string
      dictTypeCode: string
      dictValue: string
    }

    // 参数类型列表接口类型
    type paramTypeList = paramTypeInterface[]

    // 查询参数分类列表的函数
    const selectParamTypeListFunc = async () => {
      const res = await selectParamTypeApi()
      paramTypeList.value = res.data
    }

    // 当前选择的参数类型
    const currentParamType = ref('')

    // 参数类型列表
    const paramTypeList = ref<paramTypeList>([])

    // 初始化
    onMounted(() => {
      selectParamTypeListFunc()
    })

    // 计算记录类型的颜色类名的函数
    const compParamTypeColorFunc = () => {
      let strClass = ''
      switch (currentParamType.value) {
        case '0172':
          strClass = 'cSelectedGreen'
          break
        case '0173':
          strClass = 'cSelectedRed'
          break
        case '0174':
          strClass = 'cSelectedOrange'
          break
        case '0175':
          strClass = 'cSelectedGray'
          break

        default:
          break
      }
      return strClass
    }

    return () => (
      <CCard
        title={`${props.waterOverview.checkData.checkDataName}历史记录`}
        class='bg-white mb-24'
      >
        <CnBoldSpan>记录类型</CnBoldSpan>
        <div class='mt-16 inline-grid grid-cols-5  mb-19'>
          <a-button
            size='small'
            class={[
              'flex ml-16 item-center justify-center shadow-none p-0 h-auto',
              currentParamType.value == '' ? 'cSelected' : ''
            ]}
            onClick={() => {
              currentParamType.value = ''
            }}
          >
            <CnNormalSpan
              class={[
                'cursor-pointer rounded-2  py-4 w-70',
                currentParamType.value == '' ? 'colorWhite' : ''
              ]}
            >
              所有类型
            </CnNormalSpan>
          </a-button>
          {paramTypeList.value.map(item => (
            <a-button
              size='small'
              class={[
                'flex ml-16 item-center justify-center shadow-none p-0 h-auto',
                currentParamType.value == item.dictCode ? compParamTypeColorFunc() : ''
              ]}
              onClick={() => {
                currentParamType.value = item.dictCode
                console.log(currentParamType.value)
              }}
            >
              <CnNormalSpan
                class={[
                  'cursor-pointer rounded-2  py-4 w-70',
                  currentParamType.value == item.dictCode ? 'colorWhite' : ''
                ]}
              >
                {item.dictName}
              </CnNormalSpan>
            </a-button>
          ))}
        </div>
        <div class='mt-12 h-32 flex items-center'>
          <CnBoldSpan class='text-xText'>选择时间</CnBoldSpan>

          <a-range-picker
            class='ml-16 bg-select'
            v-model={[state.dateRange, 'value']}
          ></a-range-picker>

          <div class='py-6 h-full mx-16'>
            <div
              class=' w-1 h-full'
              style={{
                backgroundColor: '#E5E6EB'
              }}
            ></div>
          </div>
          <a-button
            class='h-32 bg-primary flex items-center mr-16 gap-x-6'
            icon={<IconImg imgName='magnifying-glass' class='w-16 h-16 mr-8'></IconImg>}
          >
            <CnNormalSpan
              class='text-white'
              onClick={() => {
                state.getTableDataSwitch = true
              }}
            >
              查询
            </CnNormalSpan>
          </a-button>

          <a-button
            class='h-32 bg-success flex items-center'
            icon={<i class='mr-8 iconfont icon-daochu text-16 text-white'></i>}
            onClick={openModal}
          >
            <CnNormalSpan class='text-white'>导出</CnNormalSpan>
          </a-button>
        </div>

        <ParamTable
          class='mt-21'
          id='paramTableCard'
          dateRange={state.dateRange}
          v-model={[state.getTableDataSwitch, 'lazy']}
          currentParamType={currentParamType.value}
        ></ParamTable>

        <a-modal
          title='导出所有参数的历史记录'
          v-model={[visible.value, 'visible']}
          onOk={handleExport}
          onCancel={closeModal}
        >
          <div class='p-24'>
            <a-form-item label='开始时间：'>
              <a-date-picker class='w-full' v-model={[exportParam.startTime, 'value']} />
            </a-form-item>
            <a-form-item label='结束时间：'>
              <a-date-picker class='w-full' v-model={[exportParam.endTime, 'value']} />
            </a-form-item>
          </div>
        </a-modal>
      </CCard>
    )
  }
})
